/**
 * Created by wei on 17/12/1.
 */




import React, { Component } from 'react';
import axios from 'axios';
import PropTypes from 'prop-types';
import Pager from './pager';
import './table.css'


/**
 * const topicColumns = [
 {
     key:'content',
     title:'发表内容',
     width:"70%",
     render:(text,record)=>{
         return <div className="format" dangerouslySetInnerHTML={{__html: text}}></div>;
     }
 },
 {key:'like',title:'赞'},
 {key:'hate',title:'踩'},
 {
     key:'action',
     title:'操作',
     render:(text,record)=>{
         return (
             <div>
                 <a onClick={this.showDeleteTopic.bind(this,record.id)} className="btn2" href="javascript:;">删除</a>
             </div>
         );
     }
 }
 ];
 const replayColumns = [
 {
     key:'content',
     title:'回复内容',
     width:"70%",
     render:(text,record)=>{
         return <div className="format" dangerouslySetInnerHTML={{__html: text}}></div>;
     }
 },
 {key:'like',title:'赞'},
 {key:'hate',title:'踩'},
 {
     key:'action',
     title:'操作',
     render:(text,record)=>{

        return ( <div>
             <a className="btn2" href="javascript:;">删除</a>
         </div>)
     }
 }
 ];
 const commentColumns = [
 {
     key:'content',
     width:"70%",
     title:'评论内容'
 },
 {
     key:'action',
     title:'操作',
     render:(text,record)=>{
         return (
             <div><a className="btn2" href="javascript:;">删除</a></div>
         )
     }
 }
 ];

 */


class TableComponent extends Component{

    constructor(props){
        super(props);
        this.state = {
            columns:[],
            dataSource:[],
            pageInfo: {
                pageNumber:1,
                pageSize:10,
                totalPages:0,
                totalElements:0,
                last:true,
                first:false,
                size:0,
            },
        }

        this.handlePageChanged = this.handlePageChanged.bind(this);
    }

    componentWillReceiveProps(nextProps){
        const {columns, pageInfo, dataSource} = nextProps;
        this.setState({
            columns: columns,
            pageInfo: pageInfo,
            dataSource: dataSource === void(0) ? [] : dataSource,
        });
    }

    handlePageChanged(pageNum) {

    }

    render(){

        let ths;
        if(this.state.columns.length>0){
            ths = this.state.columns.map(function (v,i,arr) {
                return (<th>{v.title}</th>);
            })
        }

        let data;
        var that = this;
        if(this.state.dataSource.length > 0){
            data = this.state.dataSource.map(function (v,i,arr) {
                var tem ;
                tem = that.state.columns.map(function (c,i,arr) {
                    var w = c.width;
                    return <td style={w === void(0) ? {} : {width:w}}>{c.render === void(0) ? v[c.key] : c.render(v[c.key], v)}</td>
                });
                return <tr>{tem}</tr>;
            })
        }

        return (
            <div>
                <div>
                    <table className="gridtable">
                        <thead>
                            <tr>
                                {ths}
                            </tr>
                        </thead>
                        <tbody>
                            {data}
                        </tbody>
                    </table>
                    <Pager pageChange={this.handlePageChanged.bind(this)} pageInfo={this.state.pageInfo}/>
                </div>
            </div>
        );
    }
}

TableComponent.propTypes = {
    columns: PropTypes.array.isRequired,
    pageInfo: PropTypes.object.isRequired,
    dataSource: PropTypes.array.isRequired,
};

export default TableComponent;
